<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .grid-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-auto-rows: minmax(20px, auto);
      gap: 10px;
    }
    .grid-list a{
      text-decoration: none;
      color: #646464;
    }
    ul li {
      list-style: none;
    }
  </style>
</head>
<body>
<div id="app">
  <template>
    <el-dropdown @mouseenter.native="showDropdown" @mouseleave.native="hideDropdown">
    <span class="dropdown-link">
      送至：<span>{{ currentArea }}</span>
    </span>
      <el-dropdown-menu class="dropdown-menu" v-show="showMenu">
        <ul class="grid-list">
          <li v-for="area in areas" :key="area.num">
            <a href="javascript:void(0);" :onclick="`change_area('${area.num}', '${area.name}')`" :num="area.num">{{ area.name }}</a>
          </li>
        </ul>
      </el-dropdown-menu>
    </el-dropdown>
  </template>

  <template>
    <el-dropdown @mouseenter.native="showDropdown" @mouseleave.native="hideDropdown">
    <span class="dropdown-link">
      送至：<span>{{ currentArea }}</span>
    </span>
      <el-dropdown-menu class="dropdown-menu" v-show="showMenu">
        <!-- 下拉列表的内容 -->
        <ul class="grid-list">
          <li><a href="javascript:void(0);" onclick="change_area('111','北京')" num="111">北京</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('112','天津')" num="112">天津</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('113','河北')" num="113">河北</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('114','山西')" num="114">山西</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('115','内蒙古')" num="115">内蒙古</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('121','辽宁')" num="121">辽宁</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('122','吉林')" num="122">吉林</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('123','黑龙江')" num="123">黑龙江</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('131','上海')" num="131">上海</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('132','江苏')" num="132">江苏</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('133','浙江')" num="133">浙江</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('134','安徽')" num="134">安徽</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('135','福建')" num="135">福建</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('136','江西')" num="136">江西</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('137','山东')" num="137">山东</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('141','河南')" num="141">河南</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('142','湖北')" num="142">湖北</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('143','湖南')" num="143">湖南</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('144','广东')" num="144">广东</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('145','广西')" num="145">广西</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('146','海南')" num="146">海南</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('150','重庆')" num="150">重庆</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('151','四川')" num="151">四川</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('152','贵州')" num="152">贵州</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('153','云南')" num="153">云南</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('154','西藏')" num="154">西藏</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('161','陕西')" num="161">陕西</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('162','甘肃')" num="162">甘肃</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('163','青海')" num="163">青海</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('164','宁夏')" num="164">宁夏</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('165','新疆')" num="165">新疆</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('171','台湾')" num="171">台湾</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('172','香港')" num="172">香港</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('173','澳门')" num="173">澳门</a></li>
          <li><a href="javascript:void(0);" onclick="change_area('174','钓鱼岛')" num="174">钓鱼岛</a></li>
        </ul>
        <!-- 可根据需要添加选项或其他内容 -->
      </el-dropdown-menu>
    </el-dropdown>
  </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        currentArea: '北京',
        showMenu: false
      }
    },
    methods: {
      showDropdown() {
        this.showMenu = true;
      },
      hideDropdown() {
        this.showMenu = false;
      },
      change_area(num,name) {

      }
    }
  })
</script>
</html>